<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="html5plus://ready"></script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<script src="../../js/flexible.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<style>
			html,
			body {
				width: 100%;
				height: 100%;
			}
			
			.ask {
				font-size: 0.453333rem;
				margin: 0.625rem 0 0.3125rem 0;
				border-bottom: 3px solid;
				border-bottom-color: #959393;
				padding: 0 0 0.3125rem 0.3125rem;
			}
			
			.answer {
				margin: 0 3%;
			}
			
			.answer div {
				padding: 5px;
			}
			
			.mui-input-row {
				border-bottom: 1px solid;
				border-bottom-color: rgb(219, 219, 219);
			}
			
			.mui-input-row label {
				font-size: 0.4rem;
				color: #222;
			}
			
			.mui-checkbox input[type=checkbox]:checked:before,
			.mui-radio input[type=radio]:checked:before {
				color: #FD698D;
			}
			
			.button {
				text-align: center;
				padding-bottom: 2rem;
			}
			
			.mui-btn,
			button {
				margin: 0.8rem auto;
				font-size: 0.4rem;
				width: 2.666666rem;
				height: 1.066666rem;
				background: #FD698D;
				color: #fff;
				border-color: #FD698D;
			}
			
			.bottom-p {
				width: 100%;
				position: fixed;
				text-align: center;
				font-size: 0.266666rem;
				bottom: 0;
				margin: 0 auto;
			}
			
			.bottom-p p {
				font-size: 0.346666rem;
			}
			
			@media only screen and (min-width: 768px) and (max-width: 1024px) {
				.mui-checkbox input[type=checkbox],
				.mui-radio input[type=radio] {
					top: 0.21875rem;
				}
			}
			
			.active {
				display: none;
			}
			
			.No_active {
				display: none;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">真心话</h1>
			<!--<a class="mui-icon mui-icon-more mui-pull-right" id="anniu"></a>-->
		</header>
		<div class="mui-content" v-if="items.legth!=0">
			<div class="ask" v-bind:class="{ active: isActive}">
				{{items.title}}: {{items.question}}
			</div>

			<div class="no_box" v-bind:class="{ No_active: No_active}">
				<img src="../../img/my/thetrue.png" />
				<p>暂无新答题</p>
			</div>

			<div class="answer">
				<div v-for="(item,index) in items.Answer" class="mui-input-row mui-radio" v-on:click="daan(index)">
					<label>{{index+1}}.{{item}}</label>
					<input name="radio" type="radio">
				</div>
			</div>
			<div class="button" v-bind:class="{ active: isActive}">
				<button v-on:click="dati" type="button" class="mui-btn">确认</button>
			</div>

			<div class="bottom-p" v-bind:class="{ active: isActive}">
				<p>请认真填写</p>
				<p>会将你推荐给三观相符的朋友</p>
			</div>
		</div>
		<script src="../../js/md5.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/function.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			var dan = null;
			var iii = 0;
			var ask = new Vue({
				el: '.mui-content',
				data: {
					items: [],
					No_active:true,
					isActive: false
				},
				methods: {
					dati: function() {
						mui("input[name='radio']").each(function() {
							if(this.checked == true) {
								this.checked = false;
							}
						});

						if(dan != null) {
							trueword[iii].Choice = dan;
							plus.storage.setItem('Truewords', JSON.stringify(trueword));
							dan = null;
							xhan();
						} else {
							mui.alert('还没选择哦！','提示')
						}
					},
					daan: function(ii) {
						dan = ii
					}
				}
			});

			var TheTrue = plus.storage.getItem('Truewords');

			var trueword = [];
			if(TheTrue) {
				trueword = JSON.parse(TheTrue);
				xhan();
			} else {
				gettrue()
			}

			function xhan() {
				ask.items = [];
				mui.each(trueword, function(ii, word) {
					if(word.Choice == null) {
						iii = ii;
						ask.items = word
						return false;
					}
				})
				if(ask.items.length == 0) {
					ask.isActive = true;
					ask.No_active = false;
					mui.toast('暂无新答题');
				}
			}
			function gettrue() {
				var AskDataUrl = getApiUrl('http://www.jiaoyou0.cn', 'Userdata/answers');

				mui.ajax({
					type: "post",
					url: AskDataUrl,
					async: true,
					dataType: 'json',
					success: function(data) {
						if(data.code == 200) {
							trueword = data.data;
							plus.storage.setItem('Truewords', JSON.stringify(data.data))
							ask.items = data.data[0];
						} else {
							mui.toast('暂无内容');
						}
					},
					error: function() {
						mui.toast('出错了');
					}
				})
			}

		</script>
	</body>

</html>